<template>
	<view class="">
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				邀请好友
			</view>
			<image class="custom-close-img" :src="clsoeImg" mode="" @click="close"></image>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<image class="content-top-imgs" :src="icon" alt=""></image>
			<view class="card">
				<view class="card-text">
					1:在有标识的门店消费，就能收到代金券。而且是，消费多少就送多少代金券!
				</view>
				<view class="card-text">
					2:日常消费中，顺手囤积代金券。日积月累，囤小券变大券!代金券在线上会员商城，可等价购物，勿须现金!
				</view>
				<view class="card-text">
					3:几千种生活用品供您挑选!
					当您享受天天囤券带来的实惠时， 千万别忘记自己的亲朋好友!
				</view>
				<!-- <view class="card-title">
					扫码，加入囤券群
					
				</view>
				<image class="card-img" :src="icon1" alt=""></image> -->
				<view class="card-btn">
					<!-- 	<view class="card-btn-left" @click="close">
						返回
					</view> -->
					<button class="card-btn-right" data-name="shareBtn" open-type="share"
						className="share">分享邀请</button>
					<!-- <view class="card-btn-right" @click="typeFn">
						
					</view> -->
				</view>
			</view>

		</view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/index/banner.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/member/member8.png',
				share: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/share.png',
				clsoeImg: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/close.png',
			}
		},
		onShareAppMessage() { // 分享到微信好友
			// 更多参数配置，参考文档
			return {
				title: '消费多少送多少，福利多多，快来参加！',
				appId: '',
				imageUrl: this.share,
				path: '/pages/index/index'
			}
		},
		methods: {
			close() {
				uni.navigateBack();
			},

			typeFn() {


				// uni.showToast({
				// 			title: "正在开发中，敬请期待！",
				// 			icon: 'none',
				// 			mask:true,
				// 		});
			},
		},

	}
</script>

<style scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}

	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.custom-close {
		width: 750rpx;
		position: relative;
	}

	.custom-close-img {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		bottom: 25rpx;
		left: 30rpx;
	}

	.content {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 27rpx 0;
		width: 750rpx;
		height: 1624rpx;
		background: #F3F4F9;
	}

	.content-top-imgs {
		margin: 88rpx auto 0;
		display: block;
		width: 694rpx;
		height: 324rpx;
	}

	.card {
		overflow: hidden;
		margin: 54rpx auto 0;
		width: 694rpx;
		height: 913rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
	}

	.card-text {
		width: 90%;
		margin: 61rpx auto 0;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 60rpx;
	}

	.card-title {
		margin: 65rpx auto 0;
		font-size: 28rpx;
		font-family: HYLanHeiHei;
		text-align: center;
		font-weight: normal;
		color: #000000;
	}

	.card-img {
		margin: 10rpx auto 0;
		display: block;
		width: 264rpx;
		height: 244rpx;
	}

	.card-btn {
		margin-top: 45rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.card-btn-left {
		width: 248rpx;
		height: 79rpx;
		background: #e1f7fc;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #34C8E8;
		text-align: center;
		line-height: 79rpx;
	}

	.card-btn-right {
		display: block;
		margin: 50rpx auto 0;
		width: 248rpx;
		height: 79rpx;
		background: #34C8E8;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		text-align: center;
		line-height: 79rpx;
	}
</style>